<template>
  <div class="q-collapse-box">
    <a-collapse defaultActiveKey="1">
      <a-collapse-panel key="1" header="事件预警">
        <div class="platform_smuggle_num">
          <a-row type="flex" style="justify-content: space-between">
            <a-col v-for="(item, i) in smuggleDatas" :key="i">
              <a-card bordered>
                <template slot="cover">
                  <div class="cover-left">
                    <h3>{{ item.count }}</h3>
                    <h4>{{ item.typeName }}</h4>
                  </div>
                  <div class="cover-right">
                    <img height="50" :src="item.ico" />
                  </div>
                </template>
              </a-card>
            </a-col>
          </a-row>
        </div>
        <div class="mingwen-table">
          <CustomTable
            ref="table"
            :showAlert="false"
            :columns="columns"
            :dataSource="pageData"
            :showSelection="false"
            :showPagination="true"
            :customRow="clickCustomRow"
            rowKey="id"
            :loading="loading"
            @change="onTableChange"
          >
            <template slot="eventLevel" slot-scope="text">
              <span v-if="text == '01'"><a-tag style="margin-left:10px;" color="red">特别重大</a-tag></span>
              <span v-if="text == '02'"><a-tag style="margin-left:10px;" color="pink">重大</a-tag></span>
              <span v-if="text == '03'"><a-tag style="margin-left:10px;" color="orange">较大</a-tag></span>
              <span v-if="text == '04'"><a-tag style="margin-left:10px;" color="cyan">一般</a-tag></span>
            </template>
          </CustomTable>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import * as api from '@/api/xlgc/alarmCenter.js'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  components: {
    CustomTable
  },
  data() {
    return {
      smuggleDatas: [
        {
          label: 'particularly',
          value: '01',
          typeName: '特别重大',
          count: '0',
          ico: require('@/assets/ico/home_1.png')
        },
        { label: 'major', value: '02', typeName: '重大', count: '0', ico: require('@/assets/ico/home_2.png') },
        { label: 'larger', value: '03', typeName: '较大', count: '0', ico: require('@/assets/ico/home_3.png') },
        { label: 'generally', value: '04', typeName: '一般', count: '0', ico: require('@/assets/ico/home_4.png') }
        // { typeName: '累计走私重点人数量', count: '0', ico: require('@/assets/ico/home_5.png') }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 70,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '事件名称',
          dataIndex: 'eventName',
          width: 125,
          align: 'left',
          customRender: t => <j-ellipsis value={t} length={8} />
        },
        {
          title: '',
          dataIndex: 'eventLevel',
          width: 100,
          align: 'left',
          scopedSlots: { customRender: 'eventLevel' }
        },
        {
          title: '位置信息',
          dataIndex: 'situation',
          // width: 120,
          align: 'left',
          // scopedSlots: { customRender: 'situation' }
          customRender: t => <j-ellipsis value={t} length={15} />
        }
      ],
      rangePickerTime: [],
      loading: false
    }
  },
  mounted() {
    this.eventWarningLevel()
    this.refreshTable()
    // this.getQuerySmuSummaryCount()
  },
  methods: {
    // {level: "01", num: 1,level: "01", num: 1}
    // 头部汇总数据
    eventWarningLevel() {
      api.eventWarningLevel().then(res => {
        if (res.success) {
          let data = res.result
          for (let key in data) {
            let num = data[key] ? data[key] : 0
            for (let item of this.smuggleDatas) {
              // console.log(key, item.value)
              if (key === item.value) {
                this.$set(item, 'count', num)
              }
            }
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    onSearch() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onQuery() {
      // this.pageFilter.pageNo = 1
      // this.refreshTable()
    },
    onResetForm() {
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.rangePickerTime = []
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      api
        .eventWarningList(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    rangePickerChange(date) {
      this.$set(this.pageFilter, 'beginDate', date[0])
      this.$set(this.pageFilter, 'endDate', date[1])
    },
    clickCustomRow(record, index) {
      return {
        on: {
          // 事件
          click: () => {
            this.$router.push({
              path: '/LifeCase/detailed',
              query: {
                item: 'Zh',
                id: record.majorId
              }
            })
            // _this.$emit('clickRow', record)
          }
        }
      }
    },
    addCaseClose() {
      this.$refs.table.onClearRowKeys()
    },
    close(value) {
      this.$emit('close', value)
    }
  }
}
</script>

<style lang="less" scoped>
.q-collapse-box {
  position: absolute;
  top: 50px;
  left: 20px;
  width: 520px;
  // height: 100%;
  // height: 800px;
}
.platform_smuggle_num {
  background-color: #ffffff;
  // border: 1px solid #e8e8e8;
  // padding-top: 16px;
  margin: 10px 0;
  .platform_title {
    padding: 0 20px 16px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px #e8e8e8 solid;
    margin-bottom: 16px;
  }
  /deep/.ant-card {
    width: 110px;
    height: 68px;
    margin: 0 auto 10px;
  }
  /deep/.ant-card-cover {
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: 14px;
      font-weight: 500;
    }
    h3 {
      font-size: 24px;
      margin-bottom: 0;
    }
    .cover-left {
      float: left;
      width: 67%;
      margin-left: 5px;
    }
    .cover-right {
      position: relative;
      float: left;
      width: 20%;
      margin: 20px 5px 0 0;
      img {
        border-radius: 2px 2px 0 0;
        margin-left: 0;
        width: 100%;
        height: auto;
      }
      .anticon {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
  /deep/.ant-card-body {
    padding: 6px;
    border-top: 1px solid #e8e8e8;
    .ant-card-meta-description {
      color: #666;
    }
  }
}
.mingwenBox /deep/.ant-col-5 {
  width: 22.833333%;
}
.mingwen-table /deep/.ant-table-row {
  cursor: pointer;
}
/deep/.ant-drawer-header {
  background-color: #f2f2f2 !important;
}
.btnBox {
  margin: 20px 0;
  overflow: hidden;
  .b1 {
    float: left;
  }
  .b2 {
    float: right;
  }
}
.text_color_1 {
  color: #d9011c;
}
.text_color_2 {
  color: #71b604;
}
</style>
